<template>
	<view style="height: 1000px; width: 1000px;" ref="map-gd" :id="randomId"></view>
</template>

<script>
	import ToolLoadJs from "@/tool/ToolLoadJs.js";
	import ToolRandom from "@/tool/ToolRandom.js";
	import ToolMapGd from "./tool/tool-map-gd.js";

	let randomId = "id-" + ToolRandom.randomStr();

	export default {
		data() {
			return {
				randomId
			}
		},
		mounted() {
			ToolLoadJs.loadJSList([
				"https://unpkg.com/@turf/turf/turf.min.js",
				"https://webapi.amap.com/maps?v=2.0&key=1c0061c834fda87908e8c6a87faff72b",
				"https://webapi.amap.com/loca?v=2.0.0&key=1c0061c834fda87908e8c6a87faff72b"
			], () => {
				let mapGd = new ToolMapGd(this.randomId);
				mapGd.loca.ambLight = {
					intensity: 0.7,
					color: '#7b7bff',
				};
				mapGd.loca.dirLight = {
					intensity: 0.8,
					color: '#fff',
					target: [0, 0, 0],
					position: [0, -1, 1],
				};
				mapGd.loca.pointLight = {
					color: 'rgb(240,88,25)',
					position: [112.028276, 31.58538, 2000000],
					intensity: 3,
					// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
					distance: 5000000,
				};
				var pl = new Loca.PrismLayer({
					zIndex: 10,
					opacity: 1,
					visible: false,
					hasSide: true,
				});

				var geo = new Loca.GeoJSONSource({
					url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/gdp.json',
				});
				pl.setSource(geo);
				// top3 的城市增加文字
				var topConf = {
					'上海市': 'https://a.amap.com/Loca/static/loca-v2/demos/images/top-one.png',
					'北京市': 'https://a.amap.com/Loca/static/loca-v2/demos/images/top-two.png',
					'广州市': 'https://a.amap.com/Loca/static/loca-v2/demos/images/top-three.png',
				};
				pl.setStyle({
					unit: 'meter',
					sideNumber: 32,
					topColor: (index, f) => {
						var n = f.properties['GDP'];
						return n > 7000 ? '#E97091' : '#2852F1';
					},
					sideTopColor: (index, f) => {
						var n = f.properties['GDP'];
						return n > 7000 ? '#E97091' : '#2852F1';
					},
					sideBottomColor: '#002bb9',
					radius: 15000,
					height: (index, f) => {
						var props = f.properties;
						var height = Math.max(100, Math.sqrt(props['GDP']) * 9000 - 50000);
						var conf = topConf[props['名称']];
						// top3 的数据，增加文字表达
						if (conf) {
							mapGd.map.add(
								new AMap.Marker({
									anchor: 'bottom-center',
									position: [f.coordinates[0], f.coordinates[1], height],
									content: '<div style="margin-bottom: 10px; float: left; font-size: 14px;height: 57px; width: 180px; color:#fff; background: no-repeat url(' +
										conf +
										'); background-size: 100%;"><p style="margin: 7px 0 0 35px; height: 20px; line-height:20px;">' +
										props['名称'] + '人口 ' + props['人口'] + '</p>' +
										'<p style="margin: 4px 0 0 35px; height: 20px; line-height:20px; color: #00a9ff; font-size: 13px;">' +
										props['GDP'] + ' 元' +
										'</p></div>',
								}),
							);
						}
						return height;
						// return 60000 + n * 100;
					},
					// rotation: 360 * 100,
					altitude: 0,
				});
				mapGd.loca.add(pl);
				mapGd.map.on('complete', function() {
					setTimeout(function() {
						pl.show(500);
						pl.addAnimate({
							key: 'height',
							value: [0, 1],
							duration: 500,
							easing: 'Linear',
							transform: 500,
							random: true,
							delay: 5000,
						});
					}, 800);
				});
				mapGd.loca.animate.start();

				// 点击事件处理
				var clickInfo = new AMap.Marker({
					anchor: 'bottom-center',
					position: [116.396923, 39.918203, 0],
				});
				clickInfo.setMap(mapGd.map);
				clickInfo.hide();
				// 动画测试
				mapGd.map.on('click', function(e) {
					var feat = pl.queryFeature(e.pixel.toArray());
					if (feat) {
						clickInfo.show();
						var props = feat.properties;
						var height = Math.max(100, Math.sqrt(props['GDP']) * 9000 - 50000);
						clickInfo.setPosition([feat.coordinates[0], feat.coordinates[1], height]);
						clickInfo.setContent(
							'<div style="text-align: center; height: 20px; width: 150px; color:#fff; font-size: 14px;">' +
							feat.properties['名称'] + ': ' + feat.properties['GDP'] +
							' 元</div>'
						);
					} else {
						clickInfo.hide();
					}
				});

				initPointLight(mapGd.loca, mapGd.map);

				initModel(mapGd.loca);
				// loca.animate.start();
				// var dat = new Loca.Dat();
				// dat.addLightInstance(ambLight, '环境光');
				// dat.addLightInstance(dirLight1, '平行光1');
				// dat.addLightInstance(dirLight2, '平行光2');
				// dat.addLightInstance(pointLight1, '点光1');
				// dat.addLightInstance(pointLight2, '点光2');
				// dat.addLightInstance(pointLight3, '点光3');
				// dat.addLayer(pl);
			})
		}
	}

	function initPointLight(loca, map) {
		var pointLight2 = new Loca.PointLight({
			color: 'rgb(255,75,0)',
			position: [116.456598, 39.923482, 400],
			intensity: 10,
			// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
			distance: 1500,
		});

		// 点光源位置改变
		var time = 0;
		var radius = 0.8;
		var height = 400;
		var centerPoint = turf.point([116.455825, 39.916603]);

		function changeLight() {
			time++;
			var pos = turf.transformTranslate(centerPoint, radius, time).geometry.coordinates;
			var pos2 = turf.transformTranslate(centerPoint, radius, time + 180).geometry.coordinates;
			pointLight2Marker.setPosition([pos[0], pos[1], height]);
			pointLight2.position = [pos[0], pos[1], height];

			requestAnimationFrame(function() {
				changeLight();
			});
		}
		changeLight();
		loca.addLight(pointLight2);

		// 环境光
		// loca.addLight(new Loca.AmbientLight({
		// 	intensity: 0.5,
		// 	color: '#fff',
		// }));
	}

	function initModel(loca) {

		var geo = new Loca.GeoJSONSource({
			url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/guomao.geojson',
		});

		var pl = new Loca.PolygonLayer({
			// loca,
			zIndex: 120,
			// cullface: 'none',
			shininess: 10,
			hasSide: true,
		});

		pl.setSource(geo);
		pl.setStyle({
			// 顶面
			topColor: 'rgba(16,128,165,1)',
			// 侧顶面
			sideTopColor: 'rgba(13,43,90,1)',
			// 侧底面
			sideBottomColor: 'rgba(24,212,255,1)',

			unit: 'meter',
			height: function(index, feature) {
				var v = feature.properties.h;
				return v;
			},
			altitude: 0,
		});
		pl.setCustomCenter([116.458657, 39.914862]);

		loca.add(pl);
	}
</script>

<style>
</style>
